<template>
	<view class="flex-col page">
		<view>
			<view :style="{height:statusBarHeight+'px'}"></view>
			<u-navbar title="售后订单" bgColor="#F5F5F5" @leftClick="$nav(2)">	
			</u-navbar>
		</view>
		
		<view v-if="list.length > 0" class="tips">提示：售后订单一个工作日处理</view>
		
		<view class="order_card" v-if="list.length > 0">
			<view class="card" v-for="(item,index) in list" :key="index" @click="goAfterDetail(item)">
				<view class="card_top">
					<view class="font14">订单号：{{item.aftersales_sn}}</view>
					<view class="font14" style="color: #5c8edc;">{{item.statusDescription}}</view>
				</view>
				<u-line color="#eaeaea" :hairline="false"></u-line>
				<view class="card_medium">
					<view style="width: 30%;">
						<image :src="item.sku.sku_img_url" class="card_img"></image>
					</view>
					
					<view class="med_right">
						<view class="font16 fontbold med_right1">{{item.goods_name}}</view>
						<view class="font12 med_right2">{{item.sku.sku_name}}</view>
						<view class="font12 med_right2">数量：x{{item.order_number}}</view>
					</view>
				</view>
				
				<view class="med_right3">
					
					<!-- <view class="font12">{{payStatus(item)}}</view> -->
					
					<view class="font12" style="margin-left: 20rpx;">实付：</view>
					<view class="font12 col_red">￥</view>
					<view class="font16 col_red">{{item.order_pay_price}}</view>
				</view>
			</view>
		
		</view>
		
		<view v-else class="flex-col items-center" style="margin-top: 80rpx;">
			<image src="/static/data_empty.png"></image>
			<text style="color: #c0c4cc;">暂无数据</text>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[]
			};
		},
		onShow() {
			this.getAfterList();
		},
		computed:{
			statusBarHeight(){
				return this.$store.state.statusBarHeight + 44
			}
		},
		methods:{
			goAfterDetail(item){
				uni.navigateTo({
					url:'/pages/after_sales/after_detail?id=' + item.aftersale_id
				})
			},
			getAfterList(){
				this.$request({
					url:'?c=Aftersales&a=aftersalesList',
					type:'post',
				}).then(res =>{
					console.log(res)
					if(res.data != null){
						this.list = res.data;
					}	
				})
			}
		}
	}
</script>

<style lang="scss">
.page{
	width: 100%;
	overflow-y: auto;
	overflow-x: hidden;
	height: 100%;
}
.order_card {
	width: 100vw;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 100rpx;
}
.card {
	width: 96%;
	margin-top: 30rpx;
	border-radius: 10rpx;
	padding: 15rpx;
	background-color: white;
	box-shadow: 1rpx 1px 5rpx #d5d5d5;
}
.card_top {
	display: flex;
	flex-direction: column;
	padding: 15rpx;
}
.card_medium {
	width: 100%;
	display: flex;
	align-items: center;
	padding: 15rpx;
	padding: 15rpx 20rpx;
}
.card_img {
	height: 180rpx;
	width: 180rpx;
	border-radius: 10rpx;
}
.med_right {
	// height: 180rpx;
	margin-left: 20rpx;
	width: 70%;
}
.med_right1 {
	// margin-bottom: 30rpx;
}
.med_right2 {
	color: #909090;
	margin-top: 15rpx;
	
}
.med_right3 {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-right: 15rpx;
}
.col_red {
	color: red;
}
.font12{
	font-size: 25rpx;
}
.tips{
	background-color: #fff;
	height: 80rpx;
	border-radius: 10rpx;
	margin: 15rpx;
	display: flex;
	align-items: center;
	padding-left: 25rpx;
	color: #FF0000;
	font-size: 28rpx;
}
</style>
